<template>
  <div class="full-dialog" v-if="isShow">
    <div style="position:relative;">
      <div class="full-dialog-box" style="width:50%">
        <div class="full-dialog-header" :style="header_style">
          {{title}}
          <i class="el-icon-close icon-cancle" style="cursor:pointer" @click="cancel"></i>
        </div>
        <div class="full-dialog-content">
          <slot ref="full_dialog"></slot>
        </div>
        <div class="full-dialog-footer" :style="footer_style">
          <div style="margin: auto;">
            <el-button type="primary" size="mini" @click="confirm">
              确定
            </el-button>
            <el-button @click="cancel" class="reset" size="mini" type="primary" plain>取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['isShow', 'title', 'form'],
  data() {
    return {

    }
  },
  watch: {
    'isShow': function(_new, _old) {
      if (_new) {
        if (this.form) {
          this.$clearObj(this.form)
        }
      }
    }
  },
  computed: {
    // box_width() {
    //   var res = 0;
    //   if (this.width) {
    //     res = this.width
    //   } else {
    //     res = 422
    //   }
    //   return res + 'px'
    // },
    header_style() {
      var config = {
        background: '#EBEEF5',
        padding: '12px 16px 12px 16px',
        fontSize: '15px',
        color: '#333',
        textAlign: 'center'
      };
      if (this.headerConfig) {
        for (var key in this.headerConfig) {
          this.config[key] = this.headerConfig[key]
        }
      }
      return config
    },
    footer_style() {
      var config = {
        background: '',
        padding: '5px 16px 16px 16px'
      };
      if (this.footerConfig) {
        for (var key in this.footerConfig) {
          this.config[key] = this.footerConfig[key]
        }
      }
      return config
    },
  },
  methods: {
    confirm() {
      this.$emit('confirm');
    },
    cancel() {
      this.$emit('close', false);
    }
  }
}

</script>
<style scoped>
.full-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background: rgba(1, 1, 1, 0.7);
  z-index: 1000;
}

.full-dialog-box {
  background: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 120px;
  display: inline-block;
  margin-bottom: 20px;
}

.full-dialog-header {
  overflow: hidden
}

.full-dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0px solid #e8eaec;
}

.icon-cancle {
  float: right;
}

/*.el-button--primary:hover {
  background-color: rgb(0, 193, 222);
   border: none; 
  color: #ffffff;
  opacity: 1;
}*/

.el-button--small {
  border-radius: 2px;
}

.el-button+.el-button {
  margin-left: 4px;
}

</style>
